import React, { Ref, useContext, useRef } from 'react';

import { TypographyTitle } from '@/components/Typography';

import cls from 'classnames';
import '@/common/pageLayout.less';

import '../../styles.less';
import { Space, Button, Table, message } from 'antd';

import { PlusOutlined, ReloadOutlined, TableOutlined } from '@ant-design/icons';
// import { UpdatePosDrawer } from '../edit';
import { positionAPI } from '../../type';
import {
  CaretDownOutlined,
  CaretRightOutlined,
} from '@ant-design/icons/lib/icons';
import { PositionContext } from '../../hooks';
import ChangeColumns from '@/components/ActionButton/components/ChangeColumns';
import { IOneModalRef } from '@/pages/type';

export const PositionTable: React.FC<positionAPI.IOrgTableProps> = ({
  dataSource,
  loading,
  reload,
  onOpenUpdate,
  columns,
  deptCheckRows, //左侧部门点击选中的数据
  changeColumns,
}) => {
  const prefix = 'org-table';

  const { curRes } = useContext(PositionContext);
  const [visible, setVisible] = React.useState(false);

  const changeColRef: Ref<IOneModalRef> = useRef(null); //弹框的ref  IOneModalRef 为公共组件 oneModal 的 类型

  // 修改下拉展开图标
  const expandIcon = (props: any) => {
    if (props.record.children && props.record.children.length > 0) {
      if (props.expanded) {
        return (
          <span
            onClick={(e) => {
              props.onExpand(props.record, e);
            }}
            style={{
              float: 'left',
              marginRight: '5px',
            }}
          >
            <span style={{ fontSize: '10px' }}>
              <CaretDownOutlined />
            </span>
          </span>
        );
      } else {
        return (
          <span
            onClick={(e) => {
              props.onExpand(props.record, e);
            }}
            style={{
              float: 'left',
              marginRight: '5px',
            }}
          >
            <span style={{ fontSize: '10px' }}>
              <CaretRightOutlined />
            </span>
          </span>
        );
      }
    } else {
      return (
        <span
          style={{
            float: 'left',
            marginRight: '5px',
          }}
        >
          <span style={{ fontSize: '10px', visibility: 'hidden' }}>
            <CaretRightOutlined />
          </span>
        </span>
      );
    }
  };

  // 关闭显示列
  const onClose = () => {
    setVisible(false);
  };

  // 打开显示列
  const onOpen = () => {
    setVisible(true);
  };

  // 确认修改显示列
  const onOK = (columns: any[]) => {
    if (columns) {
      changeColumns(columns);
      changeColRef?.current?.onModalCancel();
    }
  };

  // 修改显示列
  let showColumns = React.useMemo(() => {
    let newColumns: any = [];
    columns.forEach((i: any) => {
      if (i?.visible) {
        newColumns.push({
          ...i,
          showSorterTooltip: false,
        });
      }
    });
    return newColumns;
  }, [columns]);

  return (
    <div className={cls(prefix)}>
      <div className={cls(prefix + '-head')}>
        <div className={cls(prefix + '-title')}>
          <TypographyTitle
            level={4}
            style={{
              margin: 0,
            }}
          >
            岗位管理
          </TypographyTitle>
        </div>
        <div className={cls(prefix + '-opt')}>
          <Space>
            {curRes['/positionController/add'] && (
              <Button
                type="primary"
                icon={<PlusOutlined />}
                onClick={() => {
                  if (deptCheckRows && deptCheckRows?.category == 1) {
                    onOpenUpdate('', 'add');
                  } else {
                    message.warning('请先选择岗位所属的部门！');
                  }
                }}
                onMouseOut={(event: any) => {
                  event?.target?.nodeName == 'BUTTON'
                    ? event?.target?.blur()
                    : event.target.parentNode.blur();
                }}
              >
                添加
              </Button>
            )}
            <Button icon={<ReloadOutlined />} onClick={reload}>
              重置
            </Button>
            <Button icon={<TableOutlined />} onClick={onOpen}>
              显示列
            </Button>
          </Space>
        </div>
      </div>
      <div className={cls(prefix + '-content')}>
        <div className={cls(prefix + '-list')}>
          <div className={cls('list-table')}>
            <Table
              size="small"
              columns={showColumns}
              bordered
              pagination={false}
              dataSource={dataSource}
              loading={loading}
              rowKey={(record) => record?.id}
              scroll={{ x: 800, y: 'true' }}
              expandIcon={expandIcon}
            />
          </div>
        </div>
      </div>

      {visible && (
        <ChangeColumns
          onClose={onClose}
          onOk={onOK}
          columnsList={columns}
          ref={changeColRef}
        />
      )}
    </div>
  );
};
